import { Button } from "antd";
import * as XLSX from "xlsx";
import ExportExcel from "js-export-excel";

const Workplace = () => {
  // 导出
  /**
   * 这里实现的是 前端导出，还有一种后端导出
   *
   *    用前端导出还是后端导出，如何考虑呢？
   *
   *    1. 看数据来着，一般如果数据量大推荐使用后端导出，否则前端处理。
   *
   */
  const fn1 = () => {
    const excel = new ExportExcel({
      // 配置项
      fileName: "excel", // 文件名

      datas: [
        // 数据
        {
          sheetData: [
            { one: "一行一列", two: "一行二列" },
            { one: "二行一列", two: "二行二列" },
          ],
          sheetName: "sheet",
          sheetFilter: ["two", "one"],
          sheetHeader: ["第一列", "第二列"],
          columnWidths: [20, 20],
        },
        {
          sheetData: [
            { one: "一行一列", two: "一行二列" },
            { one: "二行一列", two: "二行二列" },
          ],
        },
      ],
    });

    excel.saveExcel(); // 保存
  };

  /**
   * 导入
   */
  const fn2 = (e: any) => {
    console.log(e.target.files[0]);
    // 获取文件对象
    const file = e.target.files[0];
    // 读取文件内容 使用 FileReader
    const reader = new FileReader();
    // 读取到二进制内容
    reader.readAsBinaryString(file);
    reader.onload = () => {
      // 读取成功， reader.result 就是读取到的内容
      // console.log(reader.result);

      // 使用 XLSX 的 read 读取
      const workbook = XLSX.read(reader.result, { type: "binary" });
      // 使用 读取出来的 workbook 的 Sheets 取具体选项卡的内容
      const t = workbook.Sheets["sheet"];
      // 转换成 json
      const json = XLSX.utils.sheet_to_json(t);
      console.log("json", json);

      // TODO: 调用后端接口，
    };
  };

  return (
    <div>
      <h1>Workplace</h1>

      <Button onClick={fn1}>导出</Button>

      {/* <Button>导入</Button> */}

      <input type="file" onChange={fn2} />
    </div>
  );
};

export default Workplace;
